<template>
  <el-container>
    <div class="c1">
      <el-form :inline="true" :model="searchData" class="demo-form-inline s1">
        <el-form-item class="inpcon">
          <el-input
              v-model="searchData.method"
              style="margin-right: 5px"
              placeholder="输入'请求方式'内容查询"
          ></el-input>
          <el-input
              v-model="searchData.requestURI"
              style="margin-right: 5px"
              placeholder="输入'请求路径'内容查询"
          ></el-input>
          <el-input
              v-model="searchData.id"
              style="margin-right: 5px"
              placeholder="输入id内容查询"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button
              size="mini"
              type="success"
              icon="el-icon-search"
              @click="searchBtn(searchData)"
          >查询</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button
              size="mini"
              type="warning"
              icon="el-icon-refresh-left"
              @click="searchrestBtn(searchData)"
          >重置</el-button
          >
        </el-form-item>
      </el-form>
      <div>

        <el-button
            :loading="downloadLoading"
            size="mini"
            class="dBtn"
            type="warning"
            icon="el-icon-download"
            @click="download"
        >导出</el-button
        >
      </div>
    </div>

    <el-card class="c2">
      <el-table
          v-loading="loading"
          :data="tableData"
          style="width: 100%"
          max-height="450"
          align="center"
      >
        <el-table-column fixed="left" type="index" width="50" label="序号">
        </el-table-column>
        <el-table-column width="170" prop="requestURI" label="请求路径">
        </el-table-column>
        <el-table-column width="150" label="响应体">
          <template slot-scope="scope">
            <el-button
                icon="el-icon-info"
                type="success"
                size="mini"
                @click="detail(scope.row.responseBody)"
            >查看详情</el-button
            >
          </template>
        </el-table-column>
        <el-table-column width="150" prop="remoteHost" label="客户端主机名/IP">
        </el-table-column>

        <el-table-column width="200" prop="protocol" label="请求协议类型及版本">
        </el-table-column>
        <el-table-column width="400" prop="requestURL" label="请求概略信息">
        </el-table-column>
        <el-table-column prop="answer" label="响应时间">
          <template slot-scope="scope">
            <el-tag size="mini">{{ scope.row.answer + "ms" }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column width="400" label="请求头">
          <template slot-scope="scope">
            <el-button
                icon="el-icon-info"
                type="success"
                size="mini"
                @click="detail2(scope.row.headers)"
            >查看详情</el-button
            >
          </template>
        </el-table-column>

         </el-table>
    </el-card>
    <el-footer>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="this.pageNum.currentPage"
          :page-sizes="[50, 100, 200, 300]"
          :page-size="this.pageNum.perPage_size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="this.pageNum.total"
      >
      </el-pagination>
    </el-footer>
    <!-- 新增日志对话框 start -->


    <!-- 新增日志对话框 end -->

    <!-- 详情 -->
    <el-dialog title="详情" :visible.sync="detailDialogVisible" width="80%">
      <p>{{ detailData }}</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="detailDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="detailDialogVisible = false"
        >确 定</el-button
        >
      </span>
    </el-dialog>


  </el-container>
</template>

<script>
import axios from "../utils/axios";
import { loggerDao, downloadFile } from "../utils/api";

export default {
  methods: {

    //查看详情

    detail(con) {
      this.detailDialogVisible = true;
      this.detailData = con;
    },
    detail2(con) {
      this.detailDialogVisible = true;
      this.detailData = con;
    },

    //查询日志

    getLogList(con) {
      axios({
        method: "GET",
        url: "/log/data",
        params: con,
      }).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.records;
          this.pageNum.current = res.data.current;
          this.pageNum.size = res.data.size;
          this.pageNum.total = res.data.total;
          this.loading = false;
        } else {
          this.$message.error(res.message);
        }
      });
    },

    //页码

    handleSizeChange(val) {
      this.pageNum.size = val;
      if (this.searchToggle) {
        this.searchData.current = this.pageNum.current;
        this.searchData.size = this.pageNum.size;
        this.getLogList(this.searchData);
      } else {
        this.getLogList(this.pageNum);
      }
    },
    handleCurrentChange(val) {
      this.pageNum.current = val;
      if (this.searchToggle) {
        this.searchData.current = this.pageNum.current;
        this.searchData.size = this.pageNum.size;
        this.getLogList(this.searchData);
      } else {
        this.getLogList(this.pageNum);
      }
    },

    //添加

    addmenu() {
      this.addmenuDialogVisible = true;
    },


    //查询

    searchBtn(con) {
      this.getLogList(con);
      this.searchToggle = true;
    },

    //导出

    download() {
      loggerDao.then((res) => {
        this.downloadLoading = false;
        downloadFile(res, "日志导出表", "xlsx");
      });
    },

    //重置

    searchrestBtn(con) {
      this.searchData.id = "";
      this.searchData.method = "";
      this.searchData.requestURI = "";
      this.getLogList(con);
      this.searchToggle = false;
    },


  },

  data() {
    return {
      pageNum: {
        current: 1,
        size: 50,
        total: 0,
      },
      addmenuDialogVisible: false,
      delmenuDialogVisible: false,
      editmenuDialogVisible: false,
      detailDialogVisible: false,
      searchToggle: false,
      loading: true,
      downloadLoading: false,
      delDate: {},
      detailData: {},
      searchData: {},
      editDate: {
        headers: "",
        id: "",
        method: "",
        protocol: "",
        queryString: "",
        remoteHost: "",
        requestBody: "",
        requestURI: "",
        requestURL: "",
        responseBody: "",
        scheme: "",
      },
      tableData: [],
      addData: {
        headers: "",
        method: "",
        protocol: "",
        queryString: "",
        remoteHost: "",
        requestBody: "",
        requestURI: "",
        requestURL: "",
        responseBody: "",
        scheme: "",
      },

      rules: {
        name: [{ required: true, message: "必填", trigger: "blur" }],
        path: [{ required: true, message: "必填", trigger: "blur" }],
        icon: [{ required: true, message: "必填", trigger: "blur" }],
        authStr: [{ required: true, message: "必填", trigger: "blur" }],
      },
    };
  },
  created() {
    this.getLogList(this.pageNum);
  },
};
</script>

<style lang="less" scoped>
.el-container {
  display: flex;
  justify-content: start;
  flex-direction: column;
  align-items: center;
}
.el-card {
  width: 100%;
}
.el-footer {
  align-self: start;
  margin-top: 1.5rem;
}

.s1 {
  height: 0;

  display: flex;
  align-items: center;
  margin-left: -2rem;
}

.inpcon {
  display: flex;
  justify-content: space-around;
}
.inpcon .el-input {
  width: 30%;
  font-size: 12px;
}
.el-input /deep/.el-input__inner {
  height: 3.05rem;
}
.c1 {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  width: 100%;
  min-height: 5rem;
}
.editform {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  text-align: left;

  .el-input /deep/.el-input__inner {
    height: 3.05rem;
    font-size: 12px !important;
  }
}
.el-input /deep/.el-input__inner {
  height: 3.05rem;
  font-size: 12px !important;
}
.editform /deep/ .el-form-item {
  display: inline-block;
  margin-left: 1rem;

  width: 45%;
}
.editform /deep/ .el-form-item__content {
  height: 3.05rem;
}
.el-table /deep/ thead {
  font-size: 12.5px;
  color: #909399;
  font-weight: 700;
}
</style>